/* =====================================
   D SOFT TECHNO SYSTEMS
   Responsive Stylesheet
===================================== */


/* =====================
   MOBILE MENU
===================== */

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    padding:10px;
    background:none;
    border:none;
}

.menu-toggle span{
    display:block;
    width:25px;
    height:3px;
    background:#0F172A;
    border-radius:3px;
    transition:.3s;
}

/* =====================
   TOP BAR
===================== */

@media(max-width:992px){

    .top-bar{
        display:none;
    }

    .top-left,
    .top-right{
        flex-direction:column;
        gap:5px;
    }

}

/* =====================
   NAVBAR
===================== */

@media(max-width:992px){

    .menu-toggle{
        display:flex;
    }

    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        padding:20px;
        gap:5px;
        box-shadow:0 10px 30px rgba(0,0,0,.1);
        display:none;
    }

    .nav-menu.show{
        display:flex;
    }

    .nav-menu a{
        padding:15px 20px;
        border-radius:10px;
    }

    .quote-btn{
        display:none;
    }

    .nav-container{
        position:relative;
    }

    .logo{
        min-width:auto;
    }

    .logo-text h2{
        font-size:22px;
    }

    .logo-text p{
        font-size:12px;
    }

    .logo-box{
        width:60px;
        height:60px;
    }

    .logo-box img{
        width:40px;
        height:40px;
    }

}

/* =====================
   HERO
===================== */

@media(max-width:992px){

    .hero{
        padding:110px 0 80px;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
    }

    .hero-content p{
        margin:auto;
        margin-bottom:35px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-content h1{
        font-size:48px;
    }

    .hero-visual{
        height:500px;
        margin-top:40px;
    }

    .main-circle{
        width:300px;
        height:300px;
        font-size:100px;
    }

}

@media(max-width:768px){

    .hero-content h1{
        font-size:38px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-stats{
        gap:25px;
    }

    .floating-card{
        display:none;
    }

}

/* =====================
   ABOUT
===================== */

@media(max-width:992px){

    .about-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }

    .about-box{
        width:100%;
        max-width:470px;
        margin:auto;
    }

    .about-features{
        grid-template-columns:1fr;
    }

    .feature{
        justify-content:center;
    }

    .about-content h2{
        font-size:36px;
    }

}

/* =====================
   WHY CHOOSE US
===================== */

@media(max-width:992px){

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .why-grid{
        grid-template-columns:1fr;
    }

}

/* =====================
   SERVICES
===================== */

@media(max-width:992px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .services-grid{
        grid-template-columns:1fr;
    }

    .services-hero h1{
        font-size:36px;
    }

}

/* =====================
   TECHNOLOGIES
===================== */

@media(max-width:992px){

    .tech-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:768px){

    .tech-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .technologies-hero h1{
        font-size:36px;
    }

}

@media(max-width:480px){

    .tech-grid{
        grid-template-columns:1fr;
    }

}

/* =====================
   PROCESS
===================== */

@media(max-width:992px){

    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .process-grid{
        grid-template-columns:1fr;
    }

}

/* =====================
   STATS
===================== */

@media(max-width:992px){

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .stats-grid{
        grid-template-columns:1fr;
    }

}

/* =====================
   PORTFOLIO
===================== */

@media(max-width:992px){

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .portfolio-grid{
        grid-template-columns:1fr;
    }

}

/* =====================
   FOOTER
===================== */

@media(max-width:992px){

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .footer-grid{
        grid-template-columns:1fr;
    }

    .page-banner h1,
    .services-hero h1,
    .technologies-hero h1{
        font-size:36px;
    }

    .section-title h2{
        font-size:32px;
    }

}